<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <table border=1>
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>假期类型</th>
                        <th>开始日期</th>
                        <th>截止日期</th>
                        <th>原因</th>
                        <th>审核状态</th>
                        <th>Operation</th>
                    </tr>
                    <tbody>
                        <tr v-for="one in playlist":key="one.rid">
                            
                            <td v-text="one.pid">
                            </td>
                            <td v-text="one.rtype">
                            </td>
                            <td v-text="one.rsdate">
                            </td>
                            <td v-text="one.redate">
                            </td>
                            <td v-text="one.rinfo">
                            </td>
                            <td v-text="one.rstate">
                            </td>
                            <td>
                                <input v-if="show" type="button" @click="approve(one.rid)" value="通过"/>
                                <input v-if="show" type="button" @click="refuse(one.rid)" value="拒绝"/>
                            </td>
                        </tr>
                    </tbody>
                </thead>
            </table>
        <input type="button" value="back" v-on:click="goBack">
    </div>

    <script>
        var main = {
            template:''
        }
        var router = new VueRouter({
            routes:[
                {path:'/',component:main}
            ]
        })
        var vm = new Vue({
            el:"#app",
            router,
            data:{
            	username:'',
            	password:'',
                pid:0,           
                pidentity:'',
                pname:'',
                playlist:[],
                show:true
            },
            methods:{
                goBack(){
                    var url = "http://localhost:8080/WebDemo/frontend/main/content.html#/apply"
                    window.location.href = url
                },
                approve(rid){
                	if(!(this.identity=='老板')){
            		var params = new URLSearchParams();
            		params.append('command', 'approve');
            		params.append('rid',rid);
                	axios.post('http://localhost:8080/WebDemo/UpdateRequestServlet',params).then(function(res){
                		window.location.reload("true");
                    });
                	}
                },
                refuse(rid){
                	if(!(this.identity=='老板')){
                	var params = new URLSearchParams();
            		params.append('command', 'refuse');
            		params.append('rid',rid);
                	axios.post('http://localhost:8080/WebDemo/UpdateRequestServlet',params).then(function(res){              		
                		window.location.reload("true");
                    });
                	}
                }
            },
            created(){
            	var jsondata = sessionStorage.getItem("json");
                var user = JSON.parse(jsondata);
                function getData(){
                	var data = ajaxGet();
                	sessionStorage.setItem("reqlist",data);
                	console.log('我被执行了');
                	console.log(data);
                }
                function ajaxGet(){
                	var json = [];
                	$.ajax({
                        url:"http://localhost:8080/WebDemo/RequestListServlet",//此处换成你的服务端地址
                        type:"Get",
                        async:false,
                        data:{
                        	pidentity:user.pidentity,
                            pid:user.pid
                        },
                        success:function (data) {
                        	json = data;
                        },
                        error:function (err) {
                            json = err;
                        }
                    });
                	return json;
                }
                getData();
            	var jsondata = sessionStorage.getItem("reqlist");
                this.playlist = JSON.parse(jsondata);
                var jsondata2 = sessionStorage.getItem("json");
                var user = JSON.parse(jsondata2);
                this.username = user.username;
                this.password = user.password;
                this.pid = user.pid;
                this.pidentity = user.pidentity;
                this.pname = user.pname;
                if(this.pidentity = "员工")
                	this.show = false;
                else(this.pidentity = "老板")
                	this.show = true;
            }
        })        
    </script>
</body>
</html>